<template>
	<view class="big-view">
		<view class="sort-view">
			状态：
			<select v-model="selected" @change="handleSelectChangeRate">
				<option v-for="option in options" :value="option.value" :key="option.value">
					{{ option.text }}
				</option>
			</select>
			进度：
			<select v-model="selectedRate" @change="handleSelectChangeRate">
				<option v-for="option in optionsRate" :value="option.value" :key="option.value">
					{{ option.text }}
				</option>
			</select>
		</view>
		<view class="status-view">
			<view class="view-item">
				总台数 ({{ listData.length }})
			</view>
			<view class="item-view1">
				加工({{ count("1")}})
			</view>
			<view class="item-view2">
				异常停机({{ count("2")}})
			</view>
			<view class="item-view0">
				空闲 ({{ count("0")}})
			</view>
			<view class="item-view3">
				离线 ({{ count("3")}})
			</view>
		</view>

		<view v-if="selected!='-1'||selectedRate!='-1'" class="grid-view">
			<view v-for="(item, index) in sortList" :key="index" :class="'grid-item'+item.dataValue">
				<view class="title">
					{{item.equipmentDes}}
				</view>
				<view class="content">
					目标产量:{{item.planAmt}}</br>
					当前产量:{{item.proAmt}}</br>
					进度:{{item.rate}}%</br>
				</view>
			</view>
		</view>
		<view v-else class="grid-view">
			<view v-for="(item, index) in listData" :key="index" :class="'grid-item'+item.dataValue">
				<view class="title">
					{{item.equipmentDes}}
				</view>
				<view class="content">
					目标产量:{{item.planAmt}}</br>
					当前产量:{{item.proAmt}}</br>
					进度:{{item.rate}}%</br>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				interval: null, //定时器
				selected: "-1", //状态
				selectedRate: '-1', //进度
				options: [{
						value: '-1',
						text: '全部'
					}, {
						value: '1',
						text: '加工'
					},
					{
						value: '2',
						text: '异常停机'
					},
					{
						value: '0',
						text: '空闲'
					},
					{
						value: '3',
						text: '离线'
					}
				],
				optionsRate: [{
						value: '-1',
						text: '0%~100%'
					}, {
						value: '1',
						text: '0%~25%'
					},
					{
						value: '2',
						text: '25%~50%'
					},
					{
						value: '0',
						text: '50%~75%'
					},
					{
						value: '3',
						text: '75%~100%'
					}
				],
				sortList: [],
				listData: [{
						"equipmentDes": "绕线机-053#",
						"dataValue": "3",
						"planAmt": 9999999,
						"proAmt": 2568442,
						"rate": 25.7
					},
					{
						"equipmentDes": "绕线机-054#",
						"dataValue": "3",
						"planAmt": 99999999,
						"proAmt": 6289064,
						"rate": 6.3
					},
					{
						"equipmentDes": "绕线机-055#",
						"dataValue": "3",
						"planAmt": 9999999,
						"proAmt": 128178,
						"rate": 1.3
					},
					{
						"equipmentDes": "绕线机-056#",
						"dataValue": "3",
						"planAmt": 0,
						"proAmt": 1397753,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-057#",
						"dataValue": "3",
						"planAmt": 99999999,
						"proAmt": 3960961,
						"rate": 4
					},
					{
						"equipmentDes": "绕线机-058#",
						"dataValue": "3",
						"planAmt": 99999999,
						"proAmt": 3404271,
						"rate": 3.4
					},
					{
						"equipmentDes": "绕线机-075#",
						"dataValue": "1",
						"planAmt": 0,
						"proAmt": 5565888,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-071#",
						"dataValue": "1",
						"planAmt": 99999999,
						"proAmt": 1931282,
						"rate": 1.9
					},
					{
						"equipmentDes": "绕线机-072#",
						"dataValue": "1",
						"planAmt": 0,
						"proAmt": 916786,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-073#",
						"dataValue": "1",
						"planAmt": 99999999,
						"proAmt": 2607594,
						"rate": 2.6
					},
					{
						"equipmentDes": "绕线机-067#",
						"dataValue": "3",
						"planAmt": 99999999,
						"proAmt": 4049805,
						"rate": 4
					},
					{
						"equipmentDes": "绕线机-069#",
						"dataValue": "1",
						"planAmt": 0,
						"proAmt": 997205,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-070#",
						"dataValue": "1",
						"planAmt": 999999,
						"proAmt": 950411,
						"rate": 95
					},
					{
						"equipmentDes": "绕线机-068#",
						"dataValue": "3",
						"planAmt": 0,
						"proAmt": 905810,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-076#",
						"dataValue": "1",
						"planAmt": 0,
						"proAmt": 2574749,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-074#",
						"dataValue": "1",
						"planAmt": 9999999,
						"proAmt": 4438333,
						"rate": 44.4
					},
					{
						"equipmentDes": "绕线机-078#",
						"dataValue": "1",
						"planAmt": 0,
						"proAmt": 5624008,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-064#",
						"dataValue": "1",
						"planAmt": 0,
						"proAmt": 4624359,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-077#",
						"dataValue": "1",
						"planAmt": 0,
						"proAmt": 94015,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-061#",
						"dataValue": "3",
						"planAmt": 0,
						"proAmt": 5161304,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-063#",
						"dataValue": "1",
						"planAmt": 0,
						"proAmt": 2871030,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-062#",
						"dataValue": "3",
						"planAmt": 0,
						"proAmt": 4845120,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-060#",
						"dataValue": "3",
						"planAmt": 0,
						"proAmt": 1242726,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-059#",
						"dataValue": "1",
						"planAmt": 0,
						"proAmt": 1193926,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-081#",
						"dataValue": "2",
						"planAmt": 0,
						"proAmt": 5922831,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-084#",
						"dataValue": "1",
						"planAmt": 0,
						"proAmt": 4931179,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-085#",
						"dataValue": "1",
						"planAmt": 0,
						"proAmt": 5446524,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-066#",
						"dataValue": "1",
						"planAmt": 0,
						"proAmt": 2881686,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-080#",
						"dataValue": "1",
						"planAmt": 0,
						"proAmt": 633847,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-079#",
						"dataValue": "1",
						"planAmt": 9999999,
						"proAmt": 2883879,
						"rate": 28.8
					},
					{
						"equipmentDes": "绕线机-065#",
						"dataValue": "3",
						"planAmt": 0,
						"proAmt": 1263184,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-086#",
						"dataValue": "1",
						"planAmt": 0,
						"proAmt": 873117,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-031#",
						"dataValue": "1",
						"planAmt": 0,
						"proAmt": 356719,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-047#",
						"dataValue": "0",
						"planAmt": 9999999,
						"proAmt": 1000,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-105#",
						"dataValue": "1",
						"planAmt": 0,
						"proAmt": 76217,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-118#",
						"dataValue": "3",
						"planAmt": 0,
						"proAmt": 53113,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-122#",
						"dataValue": "3",
						"planAmt": 0,
						"proAmt": 78664,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-098#",
						"dataValue": "1",
						"planAmt": 0,
						"proAmt": 3070994,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-108#",
						"dataValue": "3",
						"planAmt": 0,
						"proAmt": 315458,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-116#",
						"dataValue": "3",
						"planAmt": 0,
						"proAmt": 3728,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-117#",
						"dataValue": "3",
						"planAmt": 0,
						"proAmt": 21920,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-102#",
						"dataValue": "1",
						"planAmt": 0,
						"proAmt": 6581778,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-124#",
						"dataValue": "1",
						"planAmt": 0,
						"proAmt": 207619,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-104#",
						"dataValue": "0",
						"planAmt": 0,
						"proAmt": 3885106,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-096#",
						"dataValue": "1",
						"planAmt": 0,
						"proAmt": 5253711,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-103#",
						"dataValue": "2",
						"planAmt": 0,
						"proAmt": 3757371,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-126#",
						"dataValue": "1",
						"planAmt": 0,
						"proAmt": 258563,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-121#",
						"dataValue": "3",
						"planAmt": 0,
						"proAmt": 28049,
						"rate": 0
					},
					{
						"equipmentDes": "绕线机-106#",
						"dataValue": "1",
						"planAmt": 0,
						"proAmt": 3783466,
						"rate": 0
					}
				]
			}
		},
		computed: {

		},
		methods: {
			fetchData() {
				fetch('http://192.168.34.19:2008/api/KanBanEquipmentData/PIM%E7%BB%95%E7%BA%BF')
					.then(response => response.json()) // 将响应转换为JSON格式的数据
					.then(data => {
						//覆盖
						if (data != null && data.length > 0) {
							this.listData = data;
							var that = this;
							//刷新
							this.handleSelectChangeRate();
						};
					})
					.catch(error => {
						console.error("There was an error!", error); // 捕获并处理错误
					});
			},

			count(states) {
				return this.listData.filter(item => item["dataValue"] == states).length;
			},
			handleSelectChangeRate(e) {
				var that = this;
				this.sortList = [];
				var tempLow = 0;
				var tempHight = 100;
				if (this.selectedRate == '-1') {
					tempLow = 0;
					tempHight = 100;
				} else if (this.selectedRate == '1') {
					tempLow = 0;
					tempHight = 25;
				} else if (this.selectedRate == '2') {
					tempLow = 25;
					tempHight = 50;
				} else if (this.selectedRate == '0') {
					tempLow = 50;
					tempHight = 75;
				} else if (this.selectedRate == '3') {
					tempLow = 75;
					tempHight = 100;
				}
				for (var i = 0; i < this.listData.length; i++) {
					var item = this.listData[i];
					if (item["rate"] >= tempLow && item["rate"] <= tempHight) {

						console.log("----1", item, item["dataValue"], item["dataValue"] == that.selected)
						if (this.selected == '-1') {
							console.log("----2", item)
							that.sortList.push(item);
						} else if (item["dataValue"] == that.selected) {
							console.log("----2", item)
							that.sortList.push(item);
						}
					}
				}
			}
		},
		mounted() {
			this.interval = setInterval(this.fetchData, 5000); // 每5秒请求一次
		},
		beforeDestroy() {
			// 清除定时器，防止内存泄漏
			clearInterval(this.interval);
		}
	}
</script>

<style>
	body {
		background-color: black;
	}

	.status-view {
		display: flex;
		flex-direction: row;
		width: 100%;
		justify-content: space-evenly;
		background-color: transparent;
	}

	.big-view {
		width: 100%;
		background-color: transparent;
	}

	.item-view1,
	.item-view2,
	.item-view0,
	.item-view3,
	.view-item {
		text-align: center;


	}

	.view-item::before {
		content: '•';
		/* 使用HTML实体表示小圆点 */
		font-size: 2em;
		color: transparent;
		/* 设置颜色 */
		display: inline-block;
		/* 确保它显示为内联块 */
		width: 1em;
		/* 宽度 */
		font-weight: bold;
		/* 加粗 */
		margin-left: -1em;
		/* 负边距使圆点出现在内容前 */
	}

	.item-view1::before {
		content: '•';
		/* 使用HTML实体表示小圆点 */
		font-size: 2em;
		color: green;
		/* 设置颜色 */
		display: inline-block;
		/* 确保它显示为内联块 */
		width: 1em;
		/* 宽度 */
		font-weight: bold;
		/* 加粗 */
		margin-left: -1em;
		/* 负边距使圆点出现在内容前 */
	}

	.item-view2::before {
		content: '•';
		/* 使用HTML实体表示小圆点 */
		font-size: 2em;
		color: red;
		/* 设置颜色 */
		display: inline-block;
		/* 确保它显示为内联块 */
		width: 1em;
		/* 宽度 */
		font-weight: bold;
		/* 加粗 */
		margin-left: -1em;
		/* 负边距使圆点出现在内容前 */
	}

	.item-view0::before {
		content: '•';
		/* 使用HTML实体表示小圆点 */
		font-size: 2em;
		color: yellow;
		/* 设置颜色 */
		display: inline-block;
		/* 确保它显示为内联块 */
		width: 1em;
		/* 宽度 */
		font-weight: bold;
		/* 加粗 */
		margin-left: -1em;
		/* 负边距使圆点出现在内容前 */
	}

	.item-view3::before {
		content: '•';
		/* 使用HTML实体表示小圆点 */
		font-size: 2em;
		color: blue;
		/* 设置颜色 */
		display: inline-block;
		/* 确保它显示为内联块 */
		width: 1em;
		/* 宽度 */
		font-weight: bold;
		/* 加粗 */
		margin-left: -1em;
		/* 负边距使圆点出现在内容前 */
	}

	.grid-view {
		display: flex;
		flex-direction: row;
		width: 100%;
		justify-content: flex-start;
		flex-wrap: wrap;
		background: black;

	}

	.title {
		font-size: 36rpx;
		font-weight: 200;
		margin-bottom: 10rpx;
	}

	.content {
		font-size: 24rpx;

	}

	.grid-item,
	.grid-item1,
	.grid-item2,
	.grid-item0,
	.grid-item3 {
		width: 300rpx;
		color: white;
		margin: 10rpx;
		padding: 10rpx;
		border-radius: 10rpx;
		background: black;
	}

	.grid-item1 {
		background-color: green;
	}

	.grid-item2 {
		background-color: red;
	}

	.grid-item0 {
		background-color: yellow;
	}

	.grid-item3 {
		background-color: blue;
	}
</style>